<template>
	<view class="oder_list_page">
		<nav-bar title="我的订单" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="tab_box">
			<view :class="{ active: type == '' }" @click="onTabSelect('')">全部</view>
			<view :class="{ active: type == 1001 }" @click="onTabSelect(1001)">待付款</view>
			<view :class="{ active: type == 1201 }" @click="onTabSelect(1201)">待发货</view>
			<view :class="{ active: type == 1301 }" @click="onTabSelect(1301)">待收货</view>
			<view :class="{ active: type == 1401 }" @click="onTabSelect(1401)">待评价</view>
			<view v-if="module.afterSale" :class="{ active: type == 1500 }" @click="onTabSelect(1500)">售后</view>
		</view>
		<view class="support"></view>
        <mescroll-body ref="mescrollRef" height="-98" @init="mescrollInit" :down="downOption" :up="downOption" @down="downCallback" @up="upCallback">
            <view class="order_list" v-for="(item, index) in orderLists" :key="index">
                <!-- 商家名 -->
                <view class="title_box">
                    <view v-if="module.shop && item.orderType==1901 ">
                        <view class="shop_name arrow" @click="pageJump('/pages/home/shop/shop?objId=' + item.shopId)">{{ item.shopName }}</view>
                    </view>
                    <view class="shop_name" v-if="item.orderType == 1902">积分订单</view>
                    <text class="pay_status">{{ item.orderStatusStr }}</text>
                </view>
                <!-- 商品信息 -->
                <view class="goods_Info" v-for="(childItem, childIndex) of item.goodsData" :key="childIndex" @click="onOrderJump(item)">
                    <image class="goods_img" :src="childItem.goodsImg"></image>
                    <view class="info_box">
                        <view class="name">{{ childItem.goodsName }}</view>
                        <view class="specification">{{ childItem.goodsSpecName }}</view>
                        <view class="price">
                            <text>{{ childItem.priceGood }}</text>
                            <text>{{ childItem.goodsNum }}</text>
                        </view>
                    </view>
                </view>
                <!-- 时间与实际金额 -->
                <view class="time_price_box">
                    <view class="statistics" v-if="item.goodsData">
                        共计<text>{{ item.goodsData.length }}</text>件商品
                    </view>

                    <view class="right_info">
                        <view class="shipping">
                            <text>{{ item.priceLogistics }}</text>
                        </view>
                        <view class="sum_price">
                            支付：
                            <text>￥{{ item.pricePay }}</text>
                        </view>
                    </view>
                </view>
                <!-- 按钮 -->
                <view class="control_btn_box">
                    <button v-if="item.orderStatus == 1001" @click="onCancel(index)">取消订单</button>
                    <button v-if="item.orderStatus == 1002 || item.orderStatus == 1401 || item.orderStatus == 1402 || item.orderStatus == 1502"
                     @click="onDelete(index)">删除订单</button>
                    <button v-if="item.orderStatus == 1001" class="active" @click="onPay(index)">去支付</button>

                    <button v-if="item.orderStatus == 1201 && item.orderType !== 2601" class="active" @click="onRefund(index)">申请退款</button>

                    <button v-if="item.orderStatus == 1301" class="active" @click="onConfirmReceipt(index)">{{ item.logistics ? '确认收货' : '确认自提' }}</button>
                    <button v-if="item.logistics && (item.orderStatus == 1301 || item.orderStatus == 1401 || item.orderStatus == 1402)"
                     class="active" @click="pageJump('/pages/my/order/logistics?orderNo=' + item.orderNo)">
                        查看物流
                    </button>
                    <button v-if="item.orderStatus == 1401 && item.orderType != 1902" class="active" @click="pageJump('/pages/my/order/orderAssess?orderNo=' + item.orderNo)">去评价</button>
                    <button v-if="module.afterSale && item.orderStatus == 1501" class="active" @click="onCancelAfterSale(index)">取消售后</button>
                    <button v-if="item.orderStatus == 1501 || item.orderStatus == 1503" class="active" @click="onCall(serverPhone)">联系客服</button>
                    <button @click="onCall(item.shopPhone)" v-if="(item.orderStatus == 1201 || item.orderStatus == 1301 || item.orderStatus == 1501)&&item.shopPhone">联系商家</button>
                </view>
            </view>
            <view slot="empty">
                <view class="no_data">
                	<image src="../../../static/icon/ic_order_empty.png" mode="aspectFit"></image>
                	<text>暂无订单喔~</text>
                </view>
                <recommend-goods ref="recommend"></recommend-goods>
            </view>
        </mescroll-body>
	</view>
</template>

<script>
	import {
		setPayAssign
	} from '@/config/utils';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import recommendGoods from '@/components/module/recommend_goods';
	import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			recommendGoods
		},
		data() {
			return {
				type: '',
				orderLists: [],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				module: {}
			};
		},
		computed: {
			...mapState(['serverPhone'])
		},
		//第一次加载
		onLoad(e) {
			this.module = this.$base.module;
			if (e.type) {
				this.type = e.type;
			}
			this.getServerPhone();
		},
		//页面显示
		onShow() {
			this.$nextTick(() => {
			    this.mescroll.triggerDownScroll();
			});
		},
		//方法
		methods: {
			...mapMutations(['setServerPhone']),
			onJumpHome() {
				uni.switchTab({
					url: "/pages/home/home"
				});
			},
			onLoadMore(val) {
				this.loadState = val;
			},
			onOrderJump(item) {
				if (item.orderType == 1902) {
					// 积分商品
					uni.navigateTo({
						url: '/pages/integral/orderDetail?orderNo=' + item.orderNo
					});
				} else {
					uni.navigateTo({
						url: '/pages/my/order/orderDetail?orderNo=' + item.orderNo
					});
				}
			},
			//获取客服电话
			getServerPhone() {
				if (!this.serverPhone) {
					this.$http
						.get('api/open/v1/conf')
						.then(res => {
							this.setServerPhone(res.aboubUs.servicePhone);
						});
				}
			},
			//跳转页面
			pageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			//拨打电话
			onCall(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},
			onTabSelect(type) {
				this.type = type;
				this.mescroll.triggerDownScroll();
			},
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
                if (this.$refs.recommend) {
                	this.$refs.recommend.loadMore();
                } else {
                    this.loadData(page.num);
                }
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                    orderStatus: this.type
                };
                this.$http
                	.post('api/order/mall/v2/list_data', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.orderLists = res.data;
							// console.log(this.orderLists);
                		} else {
                			this.orderLists = this.orderLists.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
			//取消订单
			onCancel(index) {
				uni.showModal({
					title: '提示',
					content: '确定要取消此订单吗？',
					success: res => {
						if (res.confirm) {
							const item = this.orderLists[index];
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: item.orderNo,
									operateStatus: 1002
								})
								.then(data => {
									uni.showToast({
										title: '取消订单成功!',
										icon: 'none'
									});
									// this.orderLists[index].orderStatus = 1002;
									// this.orderLists[index].orderStatusStr = '已取消';
									this.mescroll.triggerDownScroll();
								});
						}
					}
				});
			},
			//删除订单
			onDelete(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除此订单吗？',
					success: res => {
						if (res.confirm) {
							const item = this.orderLists[index];
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: item.orderNo,
									operateStatus: 1000
								})
								.then(data => {
									uni.showToast({
										title: '删除订单成功!',
										icon: 'none'
									});
									this.orderLists.splice(index, 1);
								});
						}
					}
				});
			},
			//去支付
			onPay(index) {
				const item = this.orderLists[index];
				//支付
				setPayAssign({
					orderNo: item.orderNo,
					title: "商品订单",
					price: item.pricePay
				}, res => {
					if (res.success) {
						this.mescroll.triggerDownScroll();
					} else {
						uni.showToast({
							title: '支付失败！',
							icon: 'none'
						});
					}
				});
			},
			//确认收货
			onConfirmReceipt(index) {
				uni.showModal({
					title: '提示',
					content: '确定收到此商品？',
					success: res => {
						if (res.confirm) {
							const item = this.orderLists[index];
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: item.orderNo,
									operateStatus: 1301
								})
								.then(data => {
									uni.showToast({
										title: '确定收货成功!',
										icon: 'none'
									});
									// this.orderLists[index].orderStatus = 1401;
									// this.orderLists[index].orderStatusStr = '待评价';
									this.mescroll.triggerDownScroll();
								});
						}
					}
				});
			},
			//取消售后
			onCancelAfterSale(index) {
				uni.showModal({
					title: '提示',
					content: '确定要取消售后吗？',
					success: res => {
						if (res.confirm) {
							const item = this.orderLists[index];
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: item.orderNo,
									operateStatus: 1500
								})
								.then(data => {
									uni.showToast({
										title: '取消售后成功!',
										icon: 'none'
									});
									this.mescroll.triggerDownScroll();
								});
						}
					}
				});
			},
			//申请退款
			onRefund(index) {
				const item = this.orderLists[index];
				uni.navigateTo({
					url: "/pages/my/order/refund?type=1409&orderNo=" + item.orderNo
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面上拉触底
		onReachBottom() {
			if (this.$refs.recommend) {
				this.$refs.recommend.loadMore();
			}
		},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.support {
		height: 120rpx;
	}

	// 导航栏
	.tab_box {
		display: flex;
		background-color: #f5f5f5;
		position: fixed;
		left: 0;
		width: 100%;
		justify-content: space-around;
		z-index: 2;

		>view {
			padding: 20rpx;
			font-size: 28rpx;
			color: #333333;

			&.active {
				color: $themeColor;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: 0px;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					background-color: $themeColor;
					border-radius: 3rpx;
				}
			}
		}
	}

	.order_list {
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		background-color: #ffffff;
		border-radius: 6rpx;

		.title_box {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx 10rpx 30rpx;

			.shop_name {
				font-size: 32rpx;
				font-weight: 600;
				display: flex;
				align-items: center;

				&.arrow::after {
					content: "";
					background-image: url('https://qn.kemean.cn/upload/201904/29/6391b0ac738b4e6cb73c6a8d137de9ec');
					background-size: 12rpx 22rpx;
					background-position: right center;
					background-repeat: no-repeat;
					width: 12rpx;
					height: 22rpx;
					margin-left: 20rpx;
				}
			}

			.pay_status {
				font-size: 28rpx;
				color: #ff403f;
			}
		}

		.goods_Info {
			padding: 30rpx 30rpx 30rpx 30rpx;
			display: flex;

			.goods_img {
				@include ic(160rpx, 160rpx);
			}

			.info_box {
				width: calc(100% - 16vw);
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
				}

				.specification {
					font-size: 24rpx;
					color: #999999;
				}

				.price {
					display: flex;
					justify-content: space-between;

					text {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}

		.time_price_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 30rpx 30rpx 30rpx;

			.shipping {
				font-size: 24rpx;
				color: #333333;
				margin-right: 20rpx;
			}

			.right_info {
				display: flex;
				align-items: center;
			}

			.statistics {
				font-size: 24rpx;
				color: #333333;

				text {
					font-size: 28rpx;
					color: $themeColor;
				}
			}

			.sum_price {
				font-size: 24rpx;
				color: #333333;

				text {
					font-size: 28rpx;
					color: #ff403f;
				}
			}
		}

		.control_btn_box {
			padding: 0 30rpx 30rpx 30rpx;
			display: flex;
			justify-content: flex-end;

			button {
				line-height: 60rpx;
				height: 60rpx;
				padding: 0 25rpx;
				min-width: 160rpx;
				font-size: 28rpx;
				color: #333333;
				margin-left: 20rpx;
				background-color: #fff;
				text-align: center;
				background-color: #f7f7f7;
				border-radius: 8rpx;

				&.active {
					@include theme("gradient_bg");
					color: #FFF;
				}
			}
		}
	}

	.no_data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 430rpx;

		image {
			width: 163rpx;
			height: 240rpx;
		}

		text {
			font-size: 32rpx;
			color: #333435;
			margin-top: 30rpx;
		}

		button {
			width: 160rpx;
			height: 60rpx;
			border-radius: 8rpx;
			border: solid 2rpx #e5e5e5;
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #333435;
			line-height: 60rpx;
			background-color: transparent;
		}
	}
</style>
